﻿@{
    ViewData["Title"] = "Home Page";
    Layout = "_Layout";
    var convention = Model;

}
<fieldset class="layui-elem-field" style="margin: 20px">
    <legend>会议申请提交表</legend>
    <div class="layui-field-box">
        <form class="layui-form layui-form-pane" action="" lay-filter="example">

            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">联系人</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder=" @convention.Teacherid" disabled class="layui-input layui-disabled" id="contactpeople">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">会议地点 </label>
                        <div class="layui-input-block">
                            <select name="interest" lay-filter="aihao" id="place">
                                <option value=""></option>
                                <option value="南山101">南山101</option>
                                <option value="南山102">南山102</option>
                                <option value="紫阁104">紫阁104</option>
                                <option value="学府9#303">学府9#303</option>
                                <option value="学府16#101">学府16#101</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">参会人员</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入参会人员 " class="layui-input" id="place">
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>会议起始时间</legend>
            </fieldset>
            <div class="layui-row">
                <div class="layui-col-xs6">
                        <label class="layui-form-label">开会时间</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="daytimechose" placeholder="yyyy-MM-dd">
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择时间段 </label>
                        <div class="layui-input-block">
                            <select name="interest2" lay-filter="aihao2" id="timechose">
                                <option value="-1"></option>
                                <option value="09:00:00">上午09:00-11:00</option>
                                <option value="14:00:00">下午14:00-16:00</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1" id="addConvention" value="光速提交" />
                </div>
            </div>
        </form>
    </div>
</fieldset>




@section Scripts{
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="~/layui-v2.5.5/layui/layui.all.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        $("#addConvention").on("click", function () {

            var contactpeopleid = '@convention.Teacherid';
            var conventionplace = $("#place option:selected").val();//获取会议地点
            var daytime = $("#daytimechose").val();//获取日期
            var starttime = daytime + '\xa0' + $("#timechose option:selected").val();//获取完整的会议开始时间
            var conventiontime = $("#timechose option:selected").val();
            var temp = conventiontime.toString();
            var headtime = temp.split(":", 1);//取出了09
            var reaptime = parseInt(headtime) + 2;//reaptime =11
            var temp2 = reaptime.toString();
            var temp3 = temp2+":00:00";//11:00:00
            var endtime =daytime+'\xa0'+temp3;//现在状态是xx-xx-xx 11:00:00
  
            $.ajax({
                url: '/Api/AddConventionapply2',
                type: "post",
                DataType: "json",
                data: {
                    'Contact': contactpeopleid,
                    'ConventionPlace': conventionplace,
                    'StartTime': starttime,
                    'EndTime': endtime
                },
                success: function (data) {
                    var thisis = data.msg;
                    alert(thisis);
                }
            })
            return false;
        });//提交会议申请
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            laydate.render({
                elem: '#test16'
                ,type: 'datetime'
                ,min: '2020-1-1 09:00:00'
                ,max: '2020-2-1 17:00:00'
                , range: '到'
                , format: 'yyyy年M月d日H时m分s秒'
               
            });
            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function (value) {
                    if (value.length < 1) {
                        return '标题至少得1个字符啊';
                    }
                }
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });

            //监听提交
            form.on('submit(demo1)', function (data) {
                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                })
                return false;
            });

        });
    </script>
}

<script src="~/layui-v2.5.5/layui/layui.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;


        //限定可选日期
        var ins22 = laydate.render({
            elem: '#daytimechose'
            , min: '2020-01-01'
            , max: '2020-01-25'
            , ready: function () {
                ins22.hint('日期可选值设定在 <br> 2020-01-01 到 2020-01-25');
            }
        });

        //前后若干天可选，这里以7天为例
        laydate.render({
            elem: '#test-limit2'
            , min: -7
            , max: 7
        });

        //限定可选时间
        laydate.render({
            elem: '#test-limit3'
            , type: 'time'
            , min: '09:30:00'
            , max: '17:30:00'
            , btns: ['clear', 'confirm']
        });

        //同时绑定多个
        lay('.test-item').each(function () {
            laydate.render({
                elem: this
                , trigger: 'click'
            });
        });

        //初始赋值
        laydate.render({
            elem: '#test19'
            , value: '1989-10-14'
            , isInitValue: true
        });

        //选中后的回调
        laydate.render({
            elem: '#test20'
            , done: function (value, date) {
                layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
            }
        });

        //日期切换的回调
        laydate.render({
            elem: '#test21'
            , change: function (value, date) {
                layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
            }
        });
        //不出现底部栏
        laydate.render({
            elem: '#test22'
            , showBottom: false
        });

        //只出现确定按钮
        laydate.render({
            elem: '#test23'
            , btns: ['confirm']
        });

        //自定义事件
        laydate.render({
            elem: '#test24'
            , trigger: 'mousedown'
        });

        //点我触发
        laydate.render({
            elem: '#test25'
            , eventElem: '#test25-1'
            , trigger: 'click'
        });

        //双击我触发
        lay('#test26-1').on('dblclick', function () {
            laydate.render({
                elem: '#test26'
                , show: true
                , closeStop: '#test26-1'
            });
        });

        //日期只读
        laydate.render({
            elem: '#test27'
            , trigger: 'click'
        });

        //非input元素
        laydate.render({
            elem: '#test28'
        });

        //墨绿主题
        laydate.render({
            elem: '#test29'
            , theme: 'molv'
        });

        //自定义颜色
        laydate.render({
            elem: '#test30'
            , theme: '#393D49'
        });

        //格子主题
        laydate.render({
            elem: '#test31'
            , theme: 'grid'
        });


        //直接嵌套显示
        laydate.render({
            elem: '#test-n1'
            , position: 'static'
        });
        laydate.render({
            elem: '#test-n2'
            , position: 'static'
            , lang: 'en'
        });
        laydate.render({
            elem: '#test-n3'
            , type: 'month'
            , position: 'static'
        });
        laydate.render({
            elem: '#test-n4'
            , type: 'time'
            , position: 'static'
        });
    });
</script>
